<template>
  <view class="search-device-container">
    <!-- 搜索动画 -->
    <view class="search-animation">
      <view :class="['search-icon', isSearching ? 'searching' : '']">
        <view v-if="isSearching" class="loading-dots">
          <view
            class="dot"
            v-for="(dot, index) in 3"
            :key="index"
            :style="{ animationDelay: index * 0.2 + 's' }"
          ></view>
        </view>
        <image
          v-else
          class="bluetooth-icon"
          src="../../assets/icons/Bluetooth.png"
        ></image>
      </view>
    </view>

    <!-- 搜索按钮 -->
    <button class="search-button" :disabled="isSearching" @click="handleSearch">
      {{ isSearching ? "搜索中..." : "搜索附近设备" }}
    </button>

    <!-- 状态文本 -->
    <text v-if="isSearching" class="status-text">
      正在搜索附近的智能设备...
    </text>

    <!-- 错误信息 -->
    <text v-if="searchError" class="error-text">
      {{ searchError }}
    </text>

    <!-- 版本信息 -->
    <view class="version-info">
      <text class="version-text">固件版本号:V1.0.1 软件版本号:V1.0.2</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { bluetoothManager } from "@/utils";
import { onHide } from "@dcloudio/uni-app";
const isSearching = ref(false);
const searchError = ref<string | null>(null);

const handleSearch = async () => {
  try {
    isSearching.value = true;
    searchError.value = null;
    const devices = await bluetoothManager.startScanning();
    if (devices.length > 0) {
      uni.navigateTo({
        url: "/pages/device-list/device-list",
      });
    } else {
      searchError.value = "未找到任何设备，请确保设备已开启并靠近手机";
    }
    isSearching.value = false;
  } catch (error: any) {
    isSearching.value = false;
    searchError.value = error.message || "搜索设备失败";
    console.error("[SearchDevice] 搜索设备失败:", error);
  }
};
onHide(() => {
  isSearching.value = false;
  searchError.value = null;
});
</script>

<style scoped>
.search-device-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  min-height: 100vh;
  background: linear-gradient(to bottom, #e6ebff, #f8faff, #ffffff);
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.search-animation {
  display: flex;
  justify-content: center;
  margin-bottom: 64rpx;
}

.search-icon {
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ecedf4;
  transition: all 0.3s ease;
}

.search-icon.searching {
  animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.loading-dots {
  display: flex;
  gap: 6rpx;
}

.dot {
  width: 18rpx;
  height: 18rpx;
  border-radius: 50%;
  background-color: #2c3045;
  animation: bounce 1.4s infinite ease-in-out both;
}

.bluetooth-icon {
  color: #2c3045;
  width: 70rpx;
  height: 70rpx;
}

.search-button {
  width: 100%;
  max-width: 600rpx;
  padding: 20rpx 32rpx;
  background-color: #2c3045;
  color: white;
  font-size: 28rpx;
  font-weight: 500;
  border: none;
  box-shadow: 0 8rpx 16rpx rgba(44, 48, 69, 0.3);
  transition: all 0.3s ease;
}

.status-text {
  text-align: center;
  margin-top: 32rpx;
  color: #666;
  font-size: 24rpx;
}

.version-info {
  position: absolute;
  bottom: 32rpx;
  left: 0;
  right: 0;
  text-align: center;
}

.version-text {
  font-size: 20rpx;
  color: #999;
}

.error-text {
  margin-top: 32rpx;
  padding: 24rpx;
  background-color: rgba(255, 59, 48, 0.1);
  border-radius: 12rpx;
  color: #ff3b30;
  font-size: 24rpx;
  text-align: center;
  max-width: 600rpx;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

@keyframes bounce {
  0%,
  80%,
  100% {
    transform: scale(0);
  }

  40% {
    transform: scale(1);
  }
}
</style>
